<template>
	<view class="backview">
		<lexiconNavVue title="| 蜂计划 |" />
		<view class="top-menu-view">
			<view class="menu-item" v-for="(item, index) in menuList" :key="index" @click="menuClicked(index)">
				<image class="item-topimg" :src="item.img" mode="aspectFit"></image>
				<view class="item-titlestr">
					{{item.title}}
				</view>
				<view class="item-engstr">
					{{item.titleEng}}
				</view>
			</view>
		</view>
		<scroll-view class="words-scroll" :style="{ height: scrollHeight + 'px'}" scroll-y
			:scroll-with-animation='true'>
			<view class="gameType-topTitle-view">
				<view class="gameType-topTitle">
					组别单词卡 | Group word card
				</view>
				<view class="gameType-line"></view>
			</view>
			<wordCard ref="wordCard" @planBeeClicked="planDetailClicked"></wordCard>
			<view class="card-button" @click="createdPlanbee">
				创建蜂计划
			</view>
			<view class="plan-back">
				<view class="setting-view" @click="editPlan" v-if="planListData.length">
					<image class="setting-img" src="../../static/image/planbee/planbee-img.png" mode="aspectFit">
					</image>
				</view>
				<view class="gameType-topTitle-view">
					<view class="gameType-topTitle">
						我的计划 | My Plan
					</view>
					<view class="gameType-line"></view>
				</view>
				<view class="plan-bee-back" v-if="planListData.length !== 0">
					<block v-for="(planItem, index) in planListData">
						<block v-for="(planChildItem, childIndex) in planItem.mouthList" :key="childIndex">
							<view class="plan-year-title">
								{{planChildItem.time}}
							</view>
							<view class="planlist-back">
								<block v-for="(items, itemIndex) in planChildItem.list">
									<view class="plan-item-back" @click="planDetailClicked(items)">
										<image class="plan-content-img" :src="items.imgUrl" mode="aspectFill"></image>
										<view class="plan-content-title">
											{{items.name}}
										</view>
										<view class="plan-content-ciku">{{items.wordThesaurus.name}}</view>
										<view class="plan-content-date">
											每日{{items.needClockWordCount}}词，剩余{{items.finishDays - items.clockDays}}天
										</view>
										<view class="bottom-view" v-if="isEditPlan" @click.stop="deletePlan"
											:data-itemId="items.id">
											<image class="delete-img" src="@/static/image/planbee/plan-delete-img.png"
												mode="aspectFit"></image>
										</view>
									</view>
								</block>
							</view>
						</block>
					</block>
				</view>
				<placeview v-else></placeview>
			</view>
		</scroll-view>
		<popPromptBox v-if="showMessage" :msg="msg" @confirm="hidePromptbox"></popPromptBox>
		<selectContentView v-if="showTopicPromptbox" :msg="popMessage" confirmTitle="是" cancelTitle="否"
			@confirm="deletePlanRe" @cancel="hidePromptbox"></selectContentView>
	</view>
</template>

<script>
	import wordCard from '../../components/planBeeCom/wordCard.vue';
	export default {
		components: {
			wordCard
		},
		data() {
			return {
				showTopicPromptbox: false,
				popMessage: '',
				showMessage: false,
				msg: '',
				days: 0,
				planCardData: {},
				isEditPlan: false,
				planListData: [],
				scrollHeight: 0,
				menuList: [{
						'img': require('@/static/image/planbee/fengjiahua_icon2.png'),
						'title': '我的生词本',
						'titleEng': 'My New Words'
					}, {
						'img': require('@/static/image/planbee/fengjiahua_icon4.png'),
						'title': '蜂计划天梯榜',
						'titleEng': 'Bee Plan Ranking'
					},
					// {
					// 	'img': require('@/static/image/planbee/fengjiahua_icon5.png'),
					// 	'title': '积分便利店',
					// 	'titleEng': ' Points Store'
					// },
					{
						'img': require('@/static/image/planbee/fengjiahua_icon3.png'),
						'title': '我的小蜂巢',
						'titleEng': 'My Little Beehive'
					}
				]
			}
		},
		onLoad() {},
		onShow() {
			this.checkExpire()
			this.getBeePlanData()
		},
		mounted() {},
		onReady() {
			const that = this
			uni.createSelectorQuery().select('.top-menu-view').boundingClientRect(rect => {
				that.scrollHeight = uni.getSystemInfoSync().windowHeight - rect.bottom;
			}).exec();
		},
		methods: {
			// 顶部菜单点击事件
			menuClicked(index) {
				switch (index) {
					case 0: // 我的生词本
						if (this.isExpire == 2) {
							this.showMessage = true;
							this.msg = '您暂无蜂计划信息，请先创建！';
						} else {
							uni.navigateTo({
								url: '/pages/planBee/wordClockNewWordsPad'
							})
						}
						break;
					case 1:
						uni.navigateTo({
							url: '/pages/planBee/wordClickListofNationalLadderViews'
						})
						break;
					case 2:
						uni.navigateTo({
							url: '/pages/planBee/workClickUserMySelfView'
						})
						// this.showMessage = true;
						// this.msg = '开发中，敬请期待';
						break;
					case 3:
						// uni.navigateTo({
						// 	url: '/pages/planBee/workClickUserMySelfView'
						// })
						break;
					default:
						break
				}
			},
			createdPlanbee() {
				if (this.isExpire == 1 || this.isExpire == 2) {
					this.showMessage = true;
					this.msg = this.$statusCode.payPopMessage;
				} else {
					uni.navigateTo({
						url: '/pages/planBee/createdPlanBee?days=' + this.days,
					})
				}
			},
			getBeePlanData() {
				this.$http.beePlanList({}).then(res => {
					if (res.code === 200) {
						uni.stopPullDownRefresh(); //停止刷新
						this.planListData = res.data;
						this.planCardData = this.$util.getLastItems(res.data);
						this.$refs.wordCard.startAnimation(this.planCardData);
					} else {
						// this.$refs.wordCard.startAnimation(this.planCardData);
						this.showMessage = true;
						this.msg = res.msg;
					}
				})
			},
			//   获取蜂计划购买状态
			checkExpire: function() {
				this.$http.checkExpire({}).then(res => {
					if (res.code == 200) {
						this.isExpire = res.data.isExpire;
						this.days = res.data.days;
						this.expireTime = res.data.expireTime;
					} else {
						this.$refs.wordCard.startAnimation(this.planCardData);
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						})
					}
				})
			},
			// 点击蜂计划详情
			planDetailClicked(item) {
				if (!item.id) {
					this.createdPlanbee();
				} else {
					//要延时执行的代码
					uni.navigateTo({
						url: '/pages/planBee/wordClockSignInCalendar?planId=' +
							item.id,
					})
				}

			},
			// 编辑蜂计划
			editPlan() {
				this.isEditPlan = !this.isEditPlan;
			},
			// 删除蜂计划
			deletePlan(val) {
				console.log('val', val)
				this.deletePlanId = val.currentTarget.dataset.itemid;
				this.popMessage = '是否确认删除该打卡计划？';
				this.showTopicPromptbox = true;
			},
			// 确认删除蜂计划
			deletePlanRe() {
				var formData = {};
				formData.id = this.deletePlanId;
				this.$http.deleteBeePlan(formData).then(res => {
					this.showTopicPromptbox = false;
					if (res.code == 200) {
						this.getBeePlanData();
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						})
					}
				})
			},
			hidePromptbox() {
				this.showMessage = false;
				this.showTopicPromptbox = false;
			}
		}
	}
</script>

<style lang="less">
	.top-menu-view {
		width: 100%;
		background: linear-gradient(to bottom, #1c170d, #373632);
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-around;
		box-shadow: 5rpx 0rpx 10rpx 5rpx rgb(0, 0, 0);

		.menu-item {
			width: 70px;
			height: 85px;
			margin-bottom: 20px;
			margin-top: 10px;
			border-radius: 10px;
			background: var(--themeButtonTopBack);
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			box-shadow: 0px 5px 0px 0px rgba(209, 165, 77, 1);

			.item-topimg {
				width: 45px;
				height: 45px;
			}

			.item-titlestr {
				width: 100%;
				font-size: 10px;
				font-weight: 800;
				color: black;
				text-align: center;
			}

			.item-engstr {
				width: 100%;
				font-size: 6px;
				text-align: center;
				color: #414141;
			}
		}
	}

	.words-scroll {
		width: 100%;
		text-align: center;
	}

	.plan-back {
		width: 100%;
		padding-top: 5px;
		position: relative;
		padding-bottom: 5px;

		.plan-bee-back {
			width: 100%;
		}
	}

	.setting-view {
		width: 30px;
		height: 30px;
		top: 10px;
		right: 20px;
		position: absolute;
		border-radius: 8px;
		background: var(--themeButtonIconBack);
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0px 5px 0px 0px rgba(209, 165, 77, 1);
		transition: all 0.1s ease;

		.setting-img {
			width: 20px;
			height: 20px;
		}
	}

	.setting-view:active {
		top: 15px;
		box-shadow: 0px 0px 0px 0px rgba(209, 165, 77, 1);
	}

	// .button:active::after {
	// 	box-shadow: 0px 5px 0px 0px rgba(209, 165, 77, 1);

	// }

	.plan-year-title {
		width: 100%;
		margin-top: 5px;
		padding: 0px 15px;
		text-align: left;
		color: black;
		font-family: 'hzgb';
		font-size: 12px;
	}

	.card-button {
		width: 160px;
		height: 30px;
		display: inline-block;
		text-align: center;
		margin-bottom: 5px;
		color: black;
		font-size: 12px;
		text-align: center;
		font-family: 'hzgb';
		line-height: 30px;
		background: linear-gradient(to bottom, rgba(255, 202, 97, 1), rgba(255, 242, 139, 1));
		border-radius: 14px;
		box-shadow: 0px 8px 0px 0px #d4a750;
	}

	.bottom-view {
		width: 100%;
		height: 30px;
		background: rgba(172, 22, 11, 0.9);
		position: absolute;
		border-bottom-left-radius: 10px;
		border-bottom-right-radius: 10px;
		bottom: -8px;
		left: 0;
		display: flex;
		align-items: center;
		justify-content: center;

		.delete-img {
			width: 20px;
			height: 20px;
		}
	}

	.planlist-back {
		width: 100%;
		padding: 10px 15px;
		box-sizing: border-box;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: flex-start;

		.plan-item-back {
			max-height: 160px;
			margin-bottom: 15px;
			position: relative;
			flex: 0 0 calc((100% - 30px) / 3);
			margin-right: 10px;
			border-radius: 10px;
			padding: 15px 2px;
			box-sizing: border-box;
			display: flex;
			background: var(--themeBlackTopBack);
			box-shadow: 0px 8px 0px 0px #9b8b6f;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}


		.plan-content-img {
			width: 60px;
			height: 60px;
			border-radius: 30px;
		}

		.plan-content-title {
			width: 94%;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			font-size: 14px;
			margin-top: 10px;
			font-weight: 900;
			color: white;
			text-align: center;
		}

		.plan-content-ciku {
			width: 94%;
			font-size: 8px;
			text-align: center;
			color: white;
			font-family: 'hzgb';
		}

		.plan-content-date {
			background: var(--themeButtonIconBack);
			height: 15px;
			margin-top: 10px;
			font-weight: 700;
			line-height: 15px;
			text-align: center;
			padding: 0px 5px;
			font-size: 8px;
			border-radius: 8px;
		}
	}

	.planlist-back>.plan-item-back:nth-child(3n) {
		margin-right: 0;
	}

	@media (max-width: 350px) {

		/* 根据实际情况调整这个值 */
		.plan-item-back {
			margin-right: 0;
		}
	}
</style>